<template>
  <XcDrawer ref="drawer" :title="$t('page.app.stat.title')+' - '+node.appname+'('+node.host+':'+node.port+')'" :width="1080" :closable="true" :closeconfirm="false">
    <div class="center">
      <ButtonGroup>
        <Button :type="viewtype===0?'primary':'default'" @click="changeType(0)">{{$t('page.app.stat.latest')}}</Button>
        <Button :type="viewtype===1?'primary':'default'" @click="changeType(1)">{{$t('page.app.stat.last7day')}}</Button>
      </ButtonGroup>
    </div>
    <Divider />
    <Table row-key="id" :columns="columns" :data="stats" :loading="loading" border>
      <template slot="header">
        <span class="ml-15">{{$t('page.app.stat.updateTime')+': '+(updateTime||'')}}</span>
      </template>
      <template slot-scope="{ row }" slot="rtms">
        <TextTooltip :text="row.rtms" :tip="row.rttip" />
      </template>
      <template slot-scope="{ row }" slot="action">
        <Button v-if="row.tgroup==='SpringBoot Context'" type="error" ghost @click="nodeWatch(row)">{{$t('page.app.watch.title')}}</Button>
      </template>
    </Table>
    <NodeWatch ref="nodewatch" v-if="watchRendered" />
  </XcDrawer>
</template>

<script>
  import XcDrawer from '@/components/xcdrawer'
  import TextTooltip from '@/components/texttooltip'
  import NodeWatch from './nodewatch'
  import { t } from 'prettier'
  export default {
    name: 'comp-nodestat',
    components: { XcDrawer, TextTooltip, NodeWatch },
    data() {
      return {
        node: '',
        updateTime: '',
        loading: false,
        viewtype: 0, // 0:近一分钟  1:近N天
        columns: [
          { key: 'path', tree: true },
          { renderHeader: (h, col) => { return h('span', this.$t('page.app.stat.mqps')) }, key: 'maxqps', width: 100 },
          { renderHeader: (h, col) => { return h('span', this.$t('page.app.stat.rtms')) }, slot: 'rtms', width: 100 },
          { renderHeader: (h, col) => { return h('span', this.$t('page.app.stat.rp5m')) }, key: 'rp5m', width: 100, align: 'center' },
          { renderHeader: (h, col) => { return h('span', this.$t('page.app.stat.ep5m')) }, key: 'ep5m', width: 100, align: 'center' },
          { title: '', slot: 'action', width: 120, align: 'center' }
        ],
        stats: [],
        watchRendered: false,
      }
    },
    methods: {
      show(node) {
        this.node = node
        this.updateTime = ''
        this.viewtype = 0
        this.$refs.drawer.show()
        //
        this.loadStat()
      },
      changeType(type) {
        if (this.viewtype === type) return
        this.viewtype = type
        this.loadStat()
      },
      loadStat() {
        //
        this.loading = true
        this.$md.dispatch('app_node_stat', {
          viewtype: this.viewtype,
          data: {
            appname: this.node.appname,
            nodeId: this.node.nodeId,
          }
        }).then(data => {
          if (data.retCode === 1) {
            this.updateTime = data.updateTime
            // ===================================================
            // 解析调用树
            // ===================================================
            let statgroupmap = {}
            let stats = data.data
            let stat
            let nodeprefix = 'http://' + this.node.appname
            for (let i in stats) {
              stat = stats[i]
              stat.id = i
              stat.rp5m = stat.count || 0
              stat.ep5m = stat.errors || 0
              stat.rtms = (stat.rp5m === 0 ? 0 : parseInt(stat.totalTime / stat.count)) + 'ms'
              stat.rttip = '[' + stat.minTime + 'ms, ' + stat.maxTime + 'ms, ' + stat.totalTime + 'ms]'
              // 加入
              if (!statgroupmap[stat.tgroup]) statgroupmap[stat.tgroup] = { path: stat.tgroup, children: [], statmap: {}, _showChildren: true }
              // 建立索引
              if (!stat.prepath) {
                statgroupmap[stat.tgroup].children.push(stat)
                // 构建子
                stat.children = []
                stat._showChildren = true
                statgroupmap[stat.tgroup].statmap[stat.path] = stat
              }
            }
            // 加入子
            for (let i in stats) {
              stat = stats[i]
              if (stat.prepath) statgroupmap[stat.tgroup].statmap[stat.prepath].children.push(stat)
            }
            // 包装为展示数据
            let thatstats = []
            for (let tgroup in statgroupmap) {
              thatstats.push(statgroupmap[tgroup])
              for (let p in statgroupmap[tgroup].children) {
                stat = statgroupmap[tgroup].children[p]
                if (stat.path.indexOf(nodeprefix) === 0) {
                  stat.oripath = stat.path
                  stat.path = stat.path.substring(nodeprefix.length)
                }
              }
            }
            this.stats = thatstats
            this.loading = false
          }
        })
      },
      nodeWatch(trace) {
        this.$md.dispatch('app_node_watch', {
          path: trace.oripath,
          data: {
            appname: this.node.appname,
            nodeId: this.node.nodeId,
          }
        }).then(data => {
          if (data.retCode === 1) {
            // 弹出
            this.watchRendered = true
            this.$nextTick(() => {
              this.$refs.nodewatch.show(this.node.appname, this.node.nodeId, trace.oripath)
            })
          }
        })
      }
    }
  }
</script>
